<template>
  <div class="app" v-loading="loading">
    <el-container>      
        <el-header>
            <!-- <transition appear
             name="animate__animated animate__bounce"
             enter-active-class="animate__fadeInDown"
             leave-active-class="animate__backOutUp"> -->
              <Header></Header>
            <!-- </transition>    -->
        </el-header>     
         <el-container>   
          <el-row :gutter="0" >        
          <transition appear
           name="animate__animated animate__bounce"
           enter-active-class="animate__fadeInLeft"
           leave-active-class="animate__backOutUp">
             <el-col :xs="24" :sm="24" :md="24" :lg="5" :xl="5" :offset="1" class="hidden-md-and-down">
               <el-aside >
                 <NavMenu/>
               </el-aside>
             </el-col>
          </transition>
          <transition appear
           name="animate__animated animate__bounce"
           enter-active-class="animate__fadeInRight"
           leave-active-class="animate__backOutUp">
            <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">  
               <el-main>                            
                     <Shake id="main1"/>                 
                     <el-divider></el-divider>           
                     <Popover id="main2"/>
                     <el-divider></el-divider>  
                     <Cascader id="main3"/>
                     <Drawer id="main4"/>
               </el-main>          
            </el-col>   
          </transition>
        </el-row>
        </el-container>   
    </el-container>  
  </div>
</template>

<script>
import 'animate.css' 

import Shake from "./components/Shake.vue";
import Popover from "./components/Popover.vue";
import Cascader from "./components/Cascader.vue";
import Drawer from "./components/Drawer.vue";
import Header from "./components/Header.vue";
import NavMenu from "./components/NavMenu.vue";
export default {
  name: "App",
  components: {
    Shake,
    Popover,
    Cascader,
    Drawer,
    Header,
    NavMenu,
  },
  data() {
    return {
      loading: true,
    
    };
  },
  mounted() {
    setTimeout(() => {
      this.loading = false;
    }, 0);
  },
};
</script>

<style>

/* *{
  margin: 0;
  padding: 0;
} */
.el-aside{
  width: 100% !important;
  height: 90vh;
 
}
.el-main{
  height: 90vh;
  /* padding:0px 0px 0px 5px !important; */
  padding: 10px 5px !important;
}
body,html{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
.el-main +.el-row{
  text-align: center;
 
}

.el-header{
  padding:0px 0px;
  height: 10vh !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

}
.el-container .el-row{
  width: 100%;
}
#equSN{
 float: right;
}


.hljs ol li {
   /* padding-left: 10px; */
  color: #abb2bf;
  white-space: pre;
  list-style-position: outside;
  border-left: 1px solid #c5c5c5;
  padding-left: 10px;
}
code{
  border-radius: 10px;
  font-size: 0.3rem !important;
  font-weight: 900 !important;
  width:100%;
  padding: 0 0 0 0 !important;
  -webkit-font-smoothing:antialiased
}
pre {
 width: 100%;
 
}
.hljs {
  display: block;
  width: 100%;
  margin: 0;
  padding: 1px;
  color: #abb2bf;
  font-weight: 200;
  font-size: 0.75rem;
  font-family: Menlo, Monaco, Consolas, Courier, monospace;
  line-height: 1.5;
  white-space: pre-wrap;
  border: 0;
}
</style>
